<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                 @select="handleSelect">
          <el-menu-item index="/admin/index" @click="router.push('/admin/index')">
            <img style="width: 150px ;height:50px" src="/src/assets/banner/1.png" alt="Fantasy"/>
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>{{ admin.realname }}</template>
            <el-menu-item index="1-1" @click="updateDialogShow = true">个人中心</el-menu-item>
            <el-menu-item index="1-2" @click="changeDialogShow = true">修改密码</el-menu-item>
            <el-menu-item index="1-3" @click="logout()">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu class="el-menu-vertical-demo" :router="true">
            <el-menu-item index="/admin/index">
              <el-icon>
                <School/>
              </el-icon>
              后台首页
            </el-menu-item>

            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Avatar/>
                </el-icon>
                <span>管理员管理</span>
              </template>
              <el-menu-item index="/admin/admin">管理员列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Grid/>
                </el-icon>
                <span>商品分类管理</span>
              </template>
              <el-menu-item index="/admin/category">分类列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <ShoppingTrolley/>
                </el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/admin/goods">商品列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <UserFilled/>
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/admin/user">用户列表</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <List/>
                </el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/admin/order">订单列表</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <RouterView/>
          </el-main>
          <el-footer>
            <p style="text-align: center;">&copy; 2024/10/10 .Fantasy 鲁ICP备2024 000001号.</p>
            <p style="text-align: center;">www.Deep Dark Fantasy.com</p>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <!-- 修改密码对话框开始 -->
  <el-dialog v-model="changeDialogShow" title="请谨慎修改密码" width="500">
    <el-form>
      <div class="form-column">
        <el-form-item label="原密码" label-width="20%">
          <el-input type="password" v-model="changePassword.oldPwd" autocomplete="off" placeholder="请输入原密码"/>
        </el-form-item>
        <el-form-item label="新密码" label-width="20%">
          <el-input type="password" v-model="changePassword.newPwd" autocomplete="off" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认密码" label-width="20%">
          <el-input type="password" v-model="changePassword.newPwd1" autocomplete="off" placeholder="请确认密码"/>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeDialogShow=false">取消</el-button>
        <el-button type="primary" @click="change">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改密码对话框结束 -->
  <!--修改个人中心对话框开始-->
  <el-dialog v-model="updateDialogShow" title="修改个人信息" width="500">
    <el-form>
      <div class="form-column">
        <el-form-item label="用户名" label-width="20%">
          <el-input v-model="admin.username" autocomplete="off" placeholder="请输入用户名"/>
        </el-form-item>
        <el-form-item label="电话" label-width="20%">
          <el-input v-model="admin.phone" autocomplete="off" placeholder="请输入电话"/>
        </el-form-item>
        <el-form-item label="邮箱" label-width="20%">
          <el-input v-model="admin.email" autocomplete="off" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="真实姓名" label-width="20%">
          <el-input v-model="admin.realname" autocomplete="off" placeholder="请输入真实姓名"/>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow=false">取消</el-button>
        <el-button type="primary" @click="update">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改个人中心对话框结束-->
</template>

<script lang="ts" setup>
import router from '@/router'
import {ref} from 'vue'
import {useTokenStore} from '@/stores/token.js';
import {ElLoading, ElMessage, ElNotification} from "element-plus";
import adminApi from "@/api/adminApi.js";
//使用store
const tokenStore = useTokenStore();
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  //console.log(key, keyPath)
}
const admin = ref({
  username: null,
  phone: null,
  email: null,
  realname: null,
})
const changePassword = ref({
  oldPwd: null,
  newPwd: null,
  newPwd1: null,
})
//是否显示修改密码对话框
const changeDialogShow = ref(false)
//是否显示个人中心对话框
const updateDialogShow = ref(false)

//退出
function logout() {
  //删除store中的token
  tokenStore.$reset();
  //编程式导航
  router.push('/admin/login');
  ElNotification({
    title: 'Success',
    message: '退出成功~~~',
    type: 'success',
  });
}

//确认修改密码
function change() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.changePwd(changePassword.value)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
          //重置token并退出
          logout()
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        getInfo()
      })
}

function update() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  adminApi.update(admin.value)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          //弹出消息
          ElMessage.success(resp.msg)
          //隐藏
          updateDialogShow.value = false
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
        getInfo()
      })
}

//获取已登录用户的信息
function getInfo() {
  adminApi.getInfo()
      .then(resp => {
        //console.log(resp.data)
        admin.value = resp.data
      })
}

getInfo()
</script>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

.el-header {
  padding: 0;
}

.el-container {
  height: 100%;
}
</style>